<template>
	<!-- 1. 页面主容器 -->
	<view class="native-gameplay-page" @touchstart="handleCloseOverlay">
		<!-- 2. 统一的吸顶容器 -->
		<view class="sticky-header" :class="{ 'sticky-header--active': isHeaderSticky }">
			<!-- 2.1 吸顶后显示的搜索栏 -->
			<view class="page-header page-header--sticky" :style="topBarStyle">
				<view class="header-top">
					<view class="header-top__left">
						<u-icon name="arrow-left" color="#000" size="22" @click="onBack()"></u-icon>
						<image class="header-title" src="@/static/index/native-gameplay/headerTitle.png"
							mode="aspectFit"></image>
						<view class="header-location">
							<view class="header-location__text">淮安市</view>
						</view>
						<image class="location-arrow" src="@/static/index/native-gameplay/down.png" mode=""></image>
					</view>
					<view class="header-top__right">
						<view class="weather-info">
							<view class="weather-temp">33</view>
							<view class="weather-details">
								<view class="weather-range">/28℃</view>
								<view class="weather-status">烈日炎炎</view>
							</view>
							<view class="weather-icon">
								<image src="/static/index/native-gameplay/SunnyDay.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>

				<view class="search-section">
					<view class="search-box">
						<view class="search-box__icon">
							<u-icon name="search" color="#000" size="22"></u-icon>
						</view>
						<view class="search-box__placeholder">搜索更多景点、美食、活动等</view>
					</view>
				</view>

				<!-- 热门标签 -->
				<view class="popular-tags">
					<u-scroll-list :indicator="false" style="padding-bottom: 0;">
						<view v-for="(item, index) in list" :key="index">
							<view class="tag-item">{{item.name}}</view>
						</view>
					</u-scroll-list>
				</view>
			</view>
		</view>

		<!-- 3. 页面主要内容 (可滚动) -->
		<view class="main-content">
			<view class="page-header page-header--initial">
				<view class="header-top">
					<view class="header-top__left">
						<u-icon name="arrow-left" color="#000" size="22" @click="onBack()"></u-icon>
						<image class="header-title" src="@/static/index/native-gameplay/headerTitle.png"
							mode="aspectFit"></image>
						<view class="header-location">
							<view class="header-location__text">淮安市</view>
						</view>
						<image class="location-arrow" src="@/static/index/native-gameplay/down.png" mode=""></image>
					</view>
					<view class="header-top__right">
						<view class="weather-info">
							<view class="weather-temp">33</view>
							<view class="weather-details">
								<view class="weather-range">/28℃</view>
								<view class="weather-status">烈日炎炎</view>
							</view>
							<view class="weather-icon">
								<image src="/static/index/native-gameplay/SunnyDay.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>

				<view class="search-section">
					<view class="search-box">
						<view class="search-box__icon">
							<u-icon name="search" color="#000" size="22"></u-icon>
						</view>
						<view class="search-box__placeholder">搜索更多景点、美食、活动等</view>
					</view>
				</view>

				<!-- 热门标签 -->
				<view class="popular-tags">
					<u-scroll-list :indicator="false" style="padding-bottom: 0;">
						<view v-for="(item, index) in list" :key="index">
							<view class="tag-item">{{item.name}}</view>
						</view>
					</u-scroll-list>
				</view>
				<!-- 3.4 夏日出行计划 Swiper -->
				<swiper class="hot-swiper" circular :current="swiperCurrent" @change="swiperChange"
					previous-margin="30rpx" next-margin="30rpx">
					<swiper-item v-for="(item, index) in hotList" :key="item.id">
						<view class="swiper-card" :class="{'swiper-card--active': index === swiperCurrent}"
							@click="$emit('itemClick', item)">
							<image class="swiper-image" :src="item.image" mode="aspectFill"></image>

							<!-- 顶部热度标签 -->
							<view class="hotness-tag">
								<text class="indexIconFont icon-tzwf-rd"></text>
								<text>热度{{ item.hotness | formatLikes}}</text>
							</view>

							<!-- 顶部收藏图标 -->
							<view class="favorite-btn">
								<u-icon name="star-fill" color="#FFD44F" size="24"></u-icon>
							</view>

							<!-- 黑色渐变遮罩层 -->
							<view class="info-overlay"></view>

							<!-- 底部信息卡片容器 -->
							<view class="info-container">
								<!-- 作者信息药丸 -->
								<view class="author-card">
									<view class="author-info">
										<image class="author-avatar" :src="item.author.avatar" mode="aspectFill">
										</image>
										<text class="author-name">{{ item.author.name }}</text>
									</view>
									<view class="location-info">
										<text class="indexIconFont icon-dingwei"></text>
										<text class="location-text">{{ item.location || '淮安西游乐园' }}</text>
									</view>
								</view>
								<!-- 标题卡片 -->
								<view class="title-card">
									<text class="swiper-title">{{ item.title }}</text>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>


			<view class="hot-swiper-section">

			</view>



			<!-- 3.3 初始状态的快捷入口 (吸顶触发点) -->
			<view class="quick-links" id="initial-quick-links">
				<view class="category-tabs">
					<view class="category-tab" v-for="(item,index) in tabsList" :key="index"
						@click="handleClickTabs(item)">
						<view class="category-tab__image">
							<image :src="item.selected ? item.imgUrl : item.imgUrl_hidden" mode=""></image>
						</view>
						<view class="category-tab__title"
							:class="item.selected ? 'category-tab__title--active' : 'category-tab__title--inactive'">
							{{item.name}}
						</view>
						<view class="category-tab__badge" v-if="item.selected">
							<image src="/static/index/native-gameplay/go.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 3.5 瀑布流内容区 -->
			<view class="waterfall-section">
				<WaterfallPosts :left-list="leftList" :right-list="rightList"
					:active-long-press-post-id="activeLongPressPostId" @itemClick="navigateToPostDetail"
					@closeOverlay="handleCloseOverlay" @longPress="handleLongPress" @touchEnd="handleTouchEnd" />
				<u-loadmore :status="waterfallLoadStatus" />
			</view>
		</view>
	</view>
</template>

<script>
	import WaterfallPosts from '@/components/index/waterfall-posts/waterfall-posts.vue';
	import {
		mapState
	} from 'vuex';
	import {
		getPosts
	} from '@/request/api.js';
	import config from '@/config/index.js';
	export default {
		components: {
			WaterfallPosts,
		},
		props: {
			// 轮播图数据
			hotList: {
				type: Array,
				default: () => []
			},
			// 瀑布流左侧列表数据
			leftList: {
				type: Array,
				default: () => []
			},
			// 瀑布流右侧列表数据
			rightList: {
				type: Array,
				default: () => []
			},
			// 长按帖子的ID，用于显示特效
			activeLongPressPostId: {
				type: [String, Number],
				default: null
			},
			// 加载状态: 'loadmore', 'loading', 'nomore'
			loadStatus: {
				type: String,
				default: 'loadmore'
			}
		},
		filters: {
			// 格式化数字，例如 12500 -> 1.25万
			formatLikes(val) {
				if (val >= 10000) return (val / 10000).toFixed(2) + '万';
				if (val >= 1000) return (val / 1000).toFixed(1) + '千';
				return val;
			}
		},
		data() {
			return {
				lineBg: require('@/static/index/local-culture/tagsLine.png'),
				screenWidth: 0, //设备宽度
				currentModalVideoSrc: config.cdnURL + '/home_page/header.mp4',
				isVideoPlaying: true,
				videoSrc: config.cdnURL + '/home_page/header.mp4',


				summerPlanImages: [
					'/static/index/local/banner3.png',
					// '/static/index/local/banner2.jpg',
					'/static/index/local/banner.png',
					'http://www.hacn86.cn/home_page/2025/07/29/1753749969966_20250729084609A005.png',
				],
				currentTabs: 0, //当前选中的tabs标签
				isHeaderSticky: false,
				isQuickLinksSticky: false,
				stickyTriggerTop: 0,
				quickLinksStickyTriggerTop: 0,
				stickyHeaderHeight: 0,
				waterfallPage: 1,
				waterfallPageSize: 8,
				isWaterfallLoading: false,
				waterfallLoadStatus: 'loadmore',
				searchVal: '', //输入框内容


				swiperCurrent: 0, // 当前轮播图的索引
				tabsList: [{
						name: '综合',
						imgUrl: '/static/index/native-gameplay/first-show.png',
						imgUrl_hidden: '/static/index/native-gameplay/first-hidden.png',
						selected: true
					},
					{
						name: '亲子游',
						imgUrl: '/static/index/native-gameplay/second-show.png',
						imgUrl_hidden: '/static/index/native-gameplay/second-hidden.png',
						selected: false
					},
					{
						name: '携老游',
						imgUrl: '/static/index/native-gameplay/third-show.png',
						imgUrl_hidden: '/static/index/native-gameplay/third-hidden.png',
						selected: false
					},
					{
						name: '青春游',
						imgUrl: '/static/index/native-gameplay/fourth-show.png',
						imgUrl_hidden: '/static/index/native-gameplay/fourth-hidden.png',
						selected: false
					},
					{
						name: '自驾游',
						imgUrl: '/static/index/native-gameplay/fifth-show.png',
						imgUrl_hidden: '/static/index/native-gameplay/fifth-hidden.png',
						selected: false
					}
				],
				list: [{
						name: "西游乐园",
					},
					{
						name: "洪泽方特",
					},
					{
						name: "河下古镇",
					},
					{
						name: "文庙新天地",
					},
					{
						name: "淮安白马湖猴子",
					},
					{
						name: "西游乐园",
					},
					{
						name: "洪泽方特",
					},
					{
						name: "河下古镇",
					},
					{
						name: "文庙新天地",
					},
					{
						name: "淮安白马湖猴子",
					},
					{
						name: "西游乐园",
					},
					{
						name: "洪泽方特",
					},
					{
						name: "河下古镇",
					},
					{
						name: "文庙新天地",
					},
					{
						name: "淮安白马湖猴子",
					},
				],
			};
		},
		computed: {
			...mapState('im', ['totalUnreadCount']),

			topBarStyle() {
				// #ifdef MP-WEIXIN
				if (this.$store.state.systemInfo.capsuleInfo.width > 0) {
					const paddingRight = this.$store.state.systemInfo.capsuleInfo.width + this.$store.state.systemInfo
						.capsuleRightPadding * 2;
					const paddingTop = this.$store.state.systemInfo.statusBarHeight + this.$store.state.systemInfo
						.capsuleRightPadding;


					return `padding:${paddingTop}px ${paddingRight}px 10rpx 30rpx;`;
				}
				// #endif
				// #ifdef APP-PLUS || H5
				return `padding-top: ${uni.getSystemInfoSync().statusBarHeight}px;`;
				// #endif
				return '';
			},

		},
		onReady() {
			this.$nextTick(() => {
				this.getLayoutPositions();
				this.screenWidth = uni.getSystemInfoSync().screenWidth

			});
		},
		onPageScroll(e) {
			const scrollTop = e.scrollTop;
			const shouldBeSticky = scrollTop > 10;
			if (this.isHeaderSticky !== shouldBeSticky) {
				this.isHeaderSticky = shouldBeSticky;
			}

			if (this.quickLinksStickyTriggerTop > 0) {
				const shouldLinksBeSticky = scrollTop >= this.quickLinksStickyTriggerTop;
				if (this.isQuickLinksSticky !== shouldLinksBeSticky) {
					this.isQuickLinksSticky = shouldLinksBeSticky;
				}
			}

		},
		onLoad() {
			this.loadPosts(true);
		},
		onReachBottom() {
			this.loadPosts(false);
		},


		onPullDownRefresh() {
			this.loadPosts(true);
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 500);
		},
		onBackPress(options) {

		},
		methods: {
			// 监听轮播图切换
			swiperChange(e) {
				this.swiperCurrent = e.detail.current;
			},
			handleClickTabs(item) {
				this.tabsList.forEach((info) => {
					info.selected = false
					if (info.name == item.name) {
						info.selected = true
					}
				})
			},

			onBack() {
				uni.navigateBack();
			},
			getLayoutPositions() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.unified-sticky-container').boundingClientRect(data => {
					if (data) this.stickyHeaderHeight = data.height;
				}).exec();
				query.select('#initial-quick-links').boundingClientRect(data => {
					if (data) {
						// 快捷入口的吸顶触发点 = 元素初始top值 - 吸顶搜索栏高度 
						this.quickLinksStickyTriggerTop = data.top - this.stickyHeaderHeight + 60;
						console.log(this.quickLinksStickyTriggerTop, 'this.quickLinksStickyTriggerTop');
					}
				}).exec();
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 1. 基础变量定义
	$primary-color: #F6CA4D;
	$text-dark: #333;
	$background-gradient: linear-gradient(to bottom, #ffe0a6, #fcf4ea);
	$sticky-header-bg: #ffffff;

	// 2. 页面容器
	.native-gameplay-page {
		background-color: #fff;
	}

	// 3. 吸顶容器
	.sticky-header {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 998;
		background-color: $sticky-header-bg;
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);

		&--active {
			visibility: visible;
			opacity: 1;
			padding-top: 20rpx;
		}
	}

	// 4. 页面头部
	.page-header {
		background: $background-gradient;
		padding-top: 77rpx;
		padding-bottom: 10rpx;

		&--sticky {
			// 吸顶状态样式
		}

		&--initial {
			// 初始状态样式
		}
	}

	.header-top {
		margin: 0 27rpx;
		display: flex;
		justify-content: space-between;
		height: 50rpx;
		line-height: 50rpx;

		&__left {
			display: flex;
			align-items: center;

			.header-title {
				margin-left: 10rpx;
				width: 190rpx;
				height: 50rpx;
			}
		}

		&__right {
			// 右侧内容
		}
	}

	.header-location {
		font-size: 30rpx;
		font-weight: 400;
		margin-left: 18rpx;

		&__text {
			// 位置文本
		}
	}

	.location-arrow {
		width: 26rpx;
		height: 26rpx;
		margin-top: 12rpx;
		margin-left: 4rpx;
	}

	.weather-info {
		display: flex;
		height: 50rpx;
		align-items: center;

		.weather-temp {
			line-height: 50rpx;
			font-size: 40rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
		}

		.weather-details {
			margin-left: 10rpx;

			.weather-range {
				font-size: 20rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 1);
				line-height: 24rpx;
				margin-bottom: 5rpx;
			}

			.weather-status {
				font-size: 18rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 1);
				line-height: 16rpx;
			}
		}

		.weather-icon {
			margin-left: 10rpx;
			width: 42rpx;
			height: 46rpx;

			image {
				width: 42rpx;
				height: 46rpx;
			}
		}
	}

	.search-section {
		margin: 20rpx 27rpx 0 27rpx;
	}

	.search-box {
		background-color: #fff;
		height: 60rpx;
		border-radius: 20rpx;
		display: flex;
		line-height: 60rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: rgba(77, 77, 86, 1);

		&__icon {
			margin-top: 8rpx;
			margin: 8rpx 10rpx 8rpx 20rpx;
		}

		&__placeholder {
			// 占位文本
		}
	}

	.popular-tags {
		margin: 20rpx;

		.tag-item {
			border-radius: 10rpx;
			height: 40rpx;
			line-height: 40rpx;
			background-color: #fff;
			margin-right: 10rpx;
			padding: 0 10rpx;
			color: rgba(203, 203, 204, 1);
			font-size: 24rpx;
			font-weight: 400;
			text-align: center;
			border: 1px solid rgba(203, 203, 204, 1);
			min-width: 100rpx;
		}
	}

	// 5. 主要内容区域
	.main-content {
		// 主内容区域
	}

	// 6. 快捷链接区域
	.quick-links {
		.category-tabs {
			display: flex;
			height: 144rpx;
			padding: 30rpx 30rpx 0;
			gap: 20rpx;
			background-color: #fff;

			.category-tab {
				flex: 1;
				text-align: center;
				position: relative;

				&__image {
					width: 100%;
					height: 132rpx;
					border-radius: 10rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
						display: block;
					}
				}

				&__title {
					position: absolute;
					bottom: 14rpx;
					left: 0;
					right: 0;
					border-radius: 0 0 10rpx 10rpx;
					text-align: center;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					padding: 0 10rpx;
					box-sizing: border-box;

					&--active {
						height: 56rpx;
						line-height: 56rpx;
						color: rgba(0, 0, 0, 1);
						font-size: 26rpx;
						font-weight: 700;
					}

					&--inactive {
						height: 56rpx;
						line-height: 56rpx;
						color: rgba(0, 0, 0, 1);
						font-size: 24rpx;
						font-weight: 400;
					}
				}

				&__badge {
					position: absolute;
					top: -20rpx;
					left: 88rpx;
					right: 0;

					image {
						width: 48rpx;
						height: 44rpx;
					}
				}
			}
		}

		// 7. 轮播图区域
		.hot-swiper {
			height: 380rpx;
			margin-bottom: 30rpx;
			overflow: visible;

			.swiper-card {
				height: 98%;
				transition: all 0.3s ease-in-out;
				transform: scale(0.85);
				position: relative;
				overflow: hidden;
				border: 4rpx solid #FFD44F;
				border-radius: 50rpx 20rpx 50rpx 20rpx;

				&--active {
					transform: scale(1);
					z-index: 2;
				}

				.swiper-image {
					width: 100%;
					height: 100%;
				}

				.hotness-tag {
					position: absolute;
					top: 20rpx;
					left: 20rpx;
					background-color: rgba(0, 0, 0, 0.4);
					color: #fff;
					font-size: 22rpx;
					padding: 8rpx 16rpx;
					border-radius: 30rpx;
					display: flex;
					align-items: center;
					z-index: 2;

					.icon-tzwf-rd {
						font-size: 30rpx;
						color: #FF5544;
					}

					text {
						margin-left: 8rpx;
					}
				}

				.favorite-btn {
					position: absolute;
					top: 20rpx;
					right: 20rpx;
					z-index: 2;
				}

				.info-overlay {
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					height: 60%;
					background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
					border-radius: 0 0 20rpx 20rpx;
					z-index: 3;
				}

				.info-container {
					position: absolute;
					bottom: 20rpx;
					left: 20rpx;
					right: 20rpx;
					z-index: 4;
					display: flex;
					flex-direction: column;
					background-color: rgba(255, 255, 255, 0.2);
					border-start-end-radius: 10rpx;
					border-start-start-radius: 50rpx;
					border-end-end-radius: 50rpx;
					border-end-start-radius: 10rpx;
					box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
					backdrop-filter: blur(4px);
					-webkit-backdrop-filter: blur(15px);

					.author-card {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 10rpx 30rpx;
						z-index: 3;

						.author-info {
							display: flex;
							align-items: center;

							.author-avatar {
								width: 40rpx;
								height: 40rpx;
								border: 2rpx solid #fff;
								border-radius: 50%;
							}

							.author-name {
								margin-left: 12rpx;
								font-size: 26rpx;
								font-weight: 700;
								letter-spacing: 3rpx;
								color: #fff;
							}
						}

						.location-info {
							display: flex;
							align-items: center;
							font-size: 24rpx;
							color: #fff;

							.icon-dingwei {
								color: #ffffff;
								font-size: 25rpx;
							}

							.location-text {
								margin-left: 8rpx;
							}
						}
					}

					.title-card {
						background-color: rgba(255, 255, 255, 0.9);
						border-start-end-radius: 10rpx;
						border-start-start-radius: 40rpx;
						border-end-end-radius: 50rpx;
						border-end-start-radius: 10rpx;
						padding: 15rpx 30rpx;

						.swiper-title {
							font-size: 32rpx;
							font-weight: bold;
							color: #303133;
							display: block;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}
		}

	}



	// 8. 瀑布流区域
	.waterfall-section {
		padding: 0 10rpx;
		padding-bottom: 130rpx;
	}
</style>